<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="framework/icons/tdesign.css" rel="stylesheet">
    <link href="css/wrapper.css" rel="stylesheet">
    <link href="css/top-topMenu.css" rel="stylesheet">
    <link href="css/footer.css" rel="stylesheet">
    <script src="js/Pop.js"></script>
    <script src="js/fixTop.js"></script>

    <link href="css/wishlist.css" rel="stylesheet">
    <title>愿望单</title>
</head>
<body>
    <div class="wrapper">
        <div class="main">
            <div class="top-area">
                <div class="top-area-fix" id="fixedBox">
                    <!-- top部分 -->
                    <div class="top">
                        <div class="return" onclick="location.href='shop.html'">
                            <i class="i tdesign:chevron-left"></i>
                        </div>
                        <div class="search-box-short">
                            <img src="img/search_element.png">
                            <input type="text">
                            <div class="i tdesign:search"></div>
                        </div>
                        <div class="more" onclick="showPopup1()"> <!--打开弹窗-->
                            <i class="i tdesign:ellipsis"></i>
                        </div>
                        <div class="popmenu1">
                            <div class="popup">
                                <div class="i tdesign:chevron-down-double-s" onclick="hidePopup1()"></div> <!--关闭弹窗-->
                                <div class="popup_content">
                                    欢迎来到steam
                                </div>
                                <div class="popup_btn">
                                    <button class="share">
                                        <div class="i tdesign:share"></div>
                                        <span>分享</span>
                                    </button>
                                    <button class="refresh" onclick="location.reload()"> <!--刷新-->
                                        <div class="i tdesign:rotate"></div>
                                        <span>刷新</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="user_head" onclick="location.href='userInfo.html'">
                            <img src="img/user_head.jpg">
                        </div>
                    </div>
                    <!-- top-menu部分 -->
                    <ul class="top-menu">
                        <li class="menu">
                            <span onclick="showPopup3()">菜单</span>
                            <i class="i tdesign:chevron-down" onclick="hidePopup3()"></i>
                        </li>
                        <div class="popmenu3">
                            <div class="popup">
                                <div class="menu-item">
                                    <img src="img/user_head.jpg">
                                    <span onclick="location.href='shop.html'">您的商店</span>
                                </div>
                                <div class="menu-item">新鲜推荐</div>
                                <div class="menu-item">类别</div>
                                <div class="menu-item">点数商店</div>
                                <div class="menu-item">新闻</div>
                                <div class="menu-item">实验室</div>
                            </div>
                        </div>
                        <li class="wishlist" onclick="location.href='wishlist.html'">
                            <span>愿望单</span>
                        </li>
                        <li class="pocket" onclick="location.href='pocket.html'">
                            <span>钱包</span>
                            <span class="balance">(&#165; 0.00)</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- wishlist部分 -->
            <div class="wishlistPart">
                <!-- title部分 -->
                <div class="wishlist-title">
                    <img src="img/user_head.jpg">
                    <h2>User 的愿望单</h2>
                </div>
                <input placeholder="按名称或标签搜索" type="text">

                <!-- setting部分 -->
                <div class="setting">
                    <div class="choose" onclick="showPopup2()">
                        选项
                        <i class="i tdesign:caret-down-small"></i>
                    </div>
                    <div class="order">
                        <div>
                            排序依据：
                        </div>
                        <select>
                            <option>您的排序</option>
                            <option>名称</option>
                            <option>价格</option>
                            <option>折扣</option>
                            <option>添加日期</option>
                        </select>
                    </div>
                    <div class="popmenu2">
                        <div class="popmenu2-content">
                            <div>
                                <p>查看</p>
                                <div>
                                    <input type="radio" id="check1" name="check" checked>
                                    <label for="check1">简洁</label>
                                </div>
                                <div>
                                    <input type="radio" id="check2" name="check">
                                    <label for="check2">详细</label>
                                </div>
                            </div>
                            <div>
                                <p>平台</p>
                                <div>
                                    <input type="radio" id="platform1" name="platform" checked>
                                    <label for="platform1">任何操作系统</label>
                                </div>
                                <div>
                                    <input type="radio" id="platform2" name="platform">
                                    <label for="platform2">macOS</label>
                                </div>
                                <div>
                                    <input type="radio" id="platform3" name="platform">
                                    <label for="platform3">SteamOS + Linux</label>
                                </div>
                            </div>
                            <div>
                                <p>类型</p>
                                <div>
                                    <input type="radio" id="form1" name="form" checked>
                                    <label for="form1">全部类型</label>
                                </div>
                                <div>
                                    <input type="radio" id="form2" name="form">
                                    <label for="form2">游戏</label>
                                </div>
                                <div>
                                    <input type="radio" id="form3" name="form">
                                    <label for="form3">软件</label>
                                </div>
                                <div>
                                    <input type="radio" id="form4" name="form">
                                    <label for="form4">DLC</label>
                                </div>
                                <div>
                                    <input type="radio" id="form5" name="form">
                                    <label for="form5">视频</label>
                                </div>
                            </div>
                            <div>
                                <p>价格</p>
                                <div>
                                    <input type="radio" id="price1" name="price">
                                    <label for="price1">低于&#165;20.00</label>
                                </div>
                                <div>
                                <input type="radio" id="price2" name="price">
                                <label for="price2">低于&#165;40.00</label>
                                </div>
                            </div>
                        </div>
                        <p class="close-popmenu2" onclick="hidePopup2()">收起</p>
                    </div>
                </div>

                <!-- wishlist-item部分 -->
                <ul class="wishlist-item">
                    <li>
                        <p>Garry's Mod</p>
                        <div class="item-content">
                            <div class="comment">
                                <p>好评如潮</p>
                            </div>
                            <div class="purchase">
                                <div class="discount">-50%</div>
                                <div class="price">&#165;18.00</div>
                                <div class="i tdesign:cart"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>深海迷航</p>
                        <div class="item-content">
                            <div class="comment">
                                <p>好评如潮</p>
                            </div>
                            <div class="purchase">
                                <div class="discount">-67%</div>
                                <div class="price">&#165;35.64</div>
                                <div class="i tdesign:cart"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>Watch_Dogs™</p>
                        <div class="item-content">
                            <div class="comment">
                                <p>多半好评</p>
                            </div>
                            <div class="purchase">
                                <div class="discount">-85%</div>
                                <div class="price">&#165;14.70</div>
                                <div class="i tdesign:cart"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>NieR:Automata™</p>
                        <div class="item-content">
                            <div class="comment">
                                <p>特别好评</p>
                            </div>
                            <div class="purchase">
                                <div class="discount">-60%</div>
                                <div class="price">&#165;109.60</div>
                                <div class="i tdesign:cart"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>原子之心</p>
                        <div class="item-content">
                            <div class="comment">
                                <p>特别好评</p>
                            </div>
                            <div class="purchase">
                                <div class="discount">-60%</div>
                                <div class="price">&#165;95.60</div>
                                <div class="i tdesign:cart"></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!--footer-->
        <ul class="footer">
            <li  class="shop" onclick="location.href='shop.html'">
                <i class="i tdesign:discount-filled"></i>
            </li>
            <li class="news">
                <i class="i tdesign:article"></i>
            </li>
            <li class="secure" onclick="location.href='secure.html'">
                <i class="i tdesign:shield-error"></i>
            </li>
            <li class="notification">
                <i class="i tdesign:notification-filled"></i>
            </li>
            <li class="user" onclick="location.href='user.html'">
                <i class="i tdesign:view-list"></i>
            </li>
        </ul>
    </div>
</body>
</html>